<route lang="yaml">
name: home
meta:
  title: 主页
  icon: ant-design:home-twotone
</route>

<script lang="ts" setup>
// import { GridStack } from 'gridstack'
// import 'gridstack/dist/gridstack.min.css'

// const workCard = [{
//   name: '模块一',
//   x: 100,
//   y: 50
// }, {
//   name: '模块二',
//   x: 100,
//   y: 50
// }, {
//   name: '模块三',
//   x: 100,
//   y: 50
// }, {
//   name: '模块四',
//   x: 100,
//   y: 50
// }, {
//   name: '模块五',
//   x: 100,
//   y: 50
// }, {
//   name: '模块六',
//   x: 100,
//   y: 50
// }]

// const grid: Ref<GridStack | undefined> = ref()

// const loadItem = () => {
//   const item: any = [
//     { id: 1, x: 0, y: 1, h: 25, w: 3, content: '卡片 1' },
//     { id: 2, x: 3, y: 1, h: 25, w: 3, content: '卡片 2' },
//     { id: 3, x: 6, y: 1, h: 25, w: 3, content: '卡片 3' },
//     { id: 4, x: 9, y: 1, h: 25, w: 3, content: '卡片 4' },
//     { id: 5, x: 0, y: 26, w: 6, h: 50, content: '图表 1' },
//     { id: 6, x: 6, y: 26, w: 6, h: 50, content: '图表 2' },
//     { id: 7, x: 0, y: 76, w: 12, h: 55, content: '列表' }
//   ]
//   grid.value?.load(item)
// }

// onMounted(() => {
//   grid.value = GridStack.init({
//     acceptWidgets: true,
//     cellHeight: '6px',
//     // 列数
//     column: 12,
//     // 网格和内容间隙
//     margin: 10,
//     // staticGrid: true,
//     removable: true,
//     draggable: {
//       handle: '.grid-stack-item'
//     },
//     minRow: 1,
//     resizable: {
//       handles: 'e,se,s,sw,w'
//     }
//   })
//   loadItem()
// })

// // 添加
// const handAdd = (item: any) => {
//   grid.value?.addWidget({
//     content: `模块${item}`,
//     h: 10
//   })
// }

// const handDrag = () => {
//   console.log('handDrag: ')
// }

// const handDragOver = () => {
//   console.log('handDragOver: ')
// }
</script>

<template>
  <IkPageMain fixed>
    <!-- <div class="config-page">
      <div class="work-card">
        <div
          v-for="item in 10"
          :key="item"
          draggable="true"
          class="grid-stack-item-content"
          @click="handAdd(item)"
        >
          模块{{ item }}
        </div>
      </div>
      <div class="grid-stack" ondrop="handDrag" @dragover="handDragOver">
      </div>
    </div> -->
  </IkPageMain>
</template>

<style lang="scss" scoped>
.config-page{
  display: flex;
  height: 100%;

  .work-card{
    width: 200px;
    overflow-y: auto;

    div{
      margin: 16px;
      background: var(--ik-tabbar-bg);
      padding: 32px 16px;
      border-radius: 4px;
      cursor: move;
      user-select: none;
      transition: background .25s ease-in-out;

      &:hover{
        background: var(--ik-theme-color-re);
      }
    }
  }

  :deep(.grid-stack){
    flex: 1;
    height: 100% !important;
    overflow-y: auto;

    &>.grid-stack-item>.grid-stack-item-content{
      background: var(--ik-tabbar-bg);
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover{
        cursor: move;
      }
    }
  }
}
</style>
